import { useIntl, useModel } from '@umijs/max';
import { useRequest } from 'ahooks';
import type { CardProps } from 'antd';
import { FC } from 'react';

import Card from '@/components/Card';
import { mainPageControllerGetOldStationRunData } from '@/services/ess/mainpageStation';

import OperatingInfo, { OperatingStatus } from '../components/OperatingInfo';
import { formatPower } from '../utils/tools';

type IPerformanceMetricsProps = CardProps;

export const PerformanceMetrics: FC<IPerformanceMetricsProps> = (props) => {
  const { initialState } = useModel('@@initialState');
  const { data = {} } = useRequest(mainPageControllerGetOldStationRunData, {
    refreshDeps: [initialState?.stationId],
  });

  const intl = useIntl();

  const items = [
    {
      id: 'chargeCount',
      title: intl.formatMessage({ id: 'overviewPages.equivalentChargeTimes' }),
      unit: '',
    },
    {
      id: 'dischargeCount',
      title: intl.formatMessage({ id: 'overviewPages.equivalentDischargeTimes' }),
      unit: '',
    },
    {
      id: 'dischargeDoD',
      title: intl.formatMessage({ id: 'overviewPages.dayDepthOfDischarge' }),
      unit: '%',
    },
    {
      id: 'chargedEnergy',
      title: intl.formatMessage({ id: 'overviewPages.totalCharge' }),
      unit: 'kWh',
    },
    {
      id: 'dischargedEnergy',
      title: intl.formatMessage({ id: 'overviewPages.totalDischarge' }),
      unit: 'kWh',
    },
    {
      id: 'yesterdayConversion',
      title: intl.formatMessage({
        id: 'overviewPages.yesterdayChargeDiachargeRoundtripEfficiency',
      }),
      unit: '%',
    },
    {
      id: 'yearDischargedEnergy',
      title: intl.formatMessage({ id: 'overviewPages.annualDischargeCapacity' }),
      unit: 'kWh',
    },
    {
      id: 'yearEquivalent',
      title: intl.formatMessage({ id: 'overviewPages.annualEquivalentUtilizationFactor' }),
      unit: '%',
    },
    {
      id: 'yearRun',
      title: intl.formatMessage({ id: 'overviewPages.annualEquivalentOperatingHours' }),
      unit: '',
    },
    {
      id: 'yearChargeCount',
      title: intl.formatMessage({ id: 'overviewPages.annualEquivalentChargeTimes' }),
      unit: '',
    },
    {
      id: 'yearDischargeCount',
      title: intl.formatMessage({ id: 'overviewPages.annualEquivalentDischargeTimes' }),
      unit: '',
    },
    {
      id: 'yearConversion',
      title: intl.formatMessage({ id: 'overviewPages.annualChargeDiachargeRoundtripEfficiency' }),
      unit: '%',
    },
  ];

  const statuses = items.map<OperatingStatus>((item) => {
    let OperatingTitle = item.title;
    let OperatingUnit = item.unit;
    let OperatingCount = data.data?.[item.id as keyof typeof data.data] ?? '--';

    // chargedEnergy
    if (
      item.id === 'chargedEnergy' ||
      item.id === 'dischargedEnergy' ||
      item.id === 'yearDischargedEnergy'
    ) {
      const { value, unit } = formatPower(Number(OperatingCount));
      OperatingCount = value;
      OperatingUnit = unit;
    }

    if (OperatingCount !== '--') {
      OperatingCount = Number(OperatingCount).toFixed(2);
    }

    return {
      OperatingTitle,
      OperatingUnit,
      OperatingCount,
    };
  });

  return (
    <Card title={intl.formatMessage({ id: 'overviewPages.operationIndex' })} {...props}>
      <OperatingInfo statuses={statuses} isOldStation />
    </Card>
  );
};
